<template>
  <a-layout class="layout">
    <!-- 顶部导航 -->
    <a-layout-header class="header">
      <div style="font-size: 16px;font-weight: 500;">
        博客管理系统
      </div>
      <a-space>
        <a-button @click="$router.push({ name: 'frontend' })">
          <span>
            前台
          </span>
        </a-button>
        <LogoutButton></LogoutButton>
      </a-space>
    </a-layout-header>
    <a-layout class="body">
      <!-- 侧边栏 -->
      <a-layout-sider :width="260" collapsible breakpoint="xl">
        <a-menu @menu-item-click="handleMenuItemClick" breakpoint="xl"
          :default-selected-keys="[systemConfig.selected_current_menu_item_key]" auto-open>
          <a-sub-menu key="blog">
            <template #title>
              <span>
                <icon-bookmark />文章管理
              </span>
            </template>
            <a-menu-item key="backend_blog_list">文章管理</a-menu-item>
            <a-menu-item key="backend_tag_list">标签管理</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="2">
            <template #title>
              <span>
                <icon-wechat />评论管理
              </span>
            </template>
            <a-menu-item key="backend_comment_list">评论列表</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <!-- 内容区域 -->
      <a-layout-content class="content">
        <RouterView></RouterView>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>

import { token } from '@/stores/token';
import { useRouter } from 'vue-router';
import { systemConfig } from '@/stores/system';
import LogoutButton from '@/components/LogoutButton.vue'

const router = useRouter()

const handleMenuItemClick = (key) => {
  // https://router.vuejs.org/zh/guide/essentials/navigation.html
  router.push({ name: key })
  systemConfig.value.selected_current_menu_item_key = key
}
const logout = () => {
  // 需要调用Logout接口的, 自己添加下退出接口
  // 之前的登录状态给清理掉, store
  token.value = undefined
  // 需要重定向到登录页面
  router.push({ name: 'login' })
}


</script>

<style lang="css" scoped>
.layout {
  height: 100%;
}

.header {
  height: 60px;
  box-sizing: border-box;
  min-height: 60px;
  max-height: 60px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-2);
  align-items: center;
}

.body {
  overflow: auto;
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.content {
  padding: 12px;
}

.content::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera */
}
</style>
